<template>
<div class='lct-bottom' ref="lctBottom">
	<subTitle v-if="dataSet.leftCenterTop" :title="dataSet.leftCenterTop.lctBottom.title" ref="subTitle"></subTitle>
	<tableItem ref="lctTable" class="lctTable" :data="dataSet.leftCenterTop ? dataSet.leftCenterTop.lctBottom.data : []" :tbTitle="dataSet.leftCenterTop ? dataSet.leftCenterTop.lctBottom.tbTitle : []" :tbStyle="tbStyle"></tableItem>
	<img src="../../../../assets/imgs/left/bottomBg.png" class="bt-bg" ref="btBg">
</div>
</template>

<script>
import { mapState } from 'vuex'
import subTitle from '../../../../components/common/subTitle'
import tableItem from './tableItem'
export default {
components: {tableItem,subTitle},
data() {
return {
	tbStyle: {
		title1Width: "39%",
		title2Width: "30%"
	}
};
},
created() {},
mounted() {},
computed: {
	...mapState(['dataSet'])
},
watch: {},
methods: {
	handleData() {},
	init() {
	  this.handleData()
		let tl = new TimelineMax({})
		let tw1 = TweenMax.to(this.$refs.lctBottom, .3, {opacity: 1})
		let tw3 = TweenMax.to(this.$refs.btBg, .3, {opacity: 1})
		tl.add(tw1,'start')
			.add(this.$refs.subTitle.init(),'start+=0')
			.add(this.$refs.lctTable.init(),'start+=0.1')
			.add(tw3,'start+=0.1')
		return tl
	}
},
}
</script>
<style lang='scss' scoped>
  .lct-bottom {
		width: 100%;
		height: 200px;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(3,94,240,0.1) 100%);
		opacity: 0;
		.lctTable {
			margin: 0 auto;
		}
		.bt-bg {
			opacity: 0;
		}
	}
</style>